<template>
  <div class="setting-message-channel-wx">
    <div class="setting-item">
      <!-- <ui-title title="绑定公众号" /> -->
      <div class="scope-container wx-container">

        <template v-if="haveWx">
          <img :src="head(wxInfo.headImg)">
          <div class="content">
            <p>
              <span class="nick-name">{{$t('setting.messageChannel.nickname')}}：</span>
              <b>{{ wxInfo.nickName || $t('setting.messageChannel.nickname2') }}</b>
            </p>

            <p>
              <span class="nick-name">{{$t('setting.messageChannel.principalName')}}：</span>
              <b>{{ wxInfo.principalName || $t('setting.messageChannel.nickname3')}}</b>
            </p>
          </div>
          <el-button type="text" @click="goWxSet">{{$t('common.base.toSet')}}</el-button>
        </template>
        <template v-else>
          <img :src="defaultAvatar"/>
          <p class="content">{{$t('setting.messageChannel.tip.noBindWxTip')}}</p>
          <el-button type="text" @click="goWxSet">{{$t('common.base.toSet')}}</el-button>
        </template>
        
      </div>
    </div>
  </div>
</template>

<script>
import { getOssUrl } from '@src/util/assets'
const defaultAvatar = getOssUrl('/wx/wxDefault.png');
import { getAuthInfoWX } from '@src/api/DoMyself.js';
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { t } from '@src/locales'
export default {
  name: 'setting-message-channel-wx',
  data() {
    return {
      haveWx: false,
      wxInfo: {},
      defaultAvatar
    };
  },
  created() {
    this.getWxInfo();
  },
  methods: {
    head(src) {
      if (!src) return defaultAvatar
      return src
    },
    getWxInfo() {
      getAuthInfoWX().then(res => {
        if (res.data.status === 0) {
          // 未绑定公众号
          this.haveWx = false;
          this.concatWxUrl = res.data.mpAuthorizeUrl;
          return;
        } else if (res.data.status === 2) {
          // 未绑定公众号
          this.haveWx = false;
          this.$platform.closeTab('wx_auth');
          this.$platform.alert(res.data.message || t('common.base.tip.systemIsError'));
          return;
        } else if (res.data.status === 3) {
          // 未绑定公众号
          this.haveWx = false;
          this.$platform.closeTab('wx_auth');
          this.$platform.alert(res.data.message || t('common.base.tip.systemIsError'));
          return;
        }
        this.haveWx = true;
        this.wxInfo = res.data.data || {};
      })
    },
    goWxSet() {
      // 微信公众号设置
      openAccurateTab({
        type:PageRoutesTypeEnum.PageSettingDoMyself
      })
    },
  },
};
</script>

<style lang="scss">
.setting-message-channel-wx {
  .setting-item {
    &:last-child{
      border:0;
    }
    .scope-container {
      margin: 24px 0 4px 4px;
    }
    .wx-container{
      width: 389px;
      height: 318px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1200);
      border-radius: 4px;
      
      img {
        width: 112px;
        height: 112px;
        margin-top: 32px;
        margin-bottom: 16px;
      }
      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 60px;
        font-size: 14px;
        color: $text-color-regular;
        margin:0;
        p {
          font-size: 14px;
          color: $text-color-primary;
          line-height: 22px;
          margin:0 0 8px;
          .nick-name {
            color: $text-color-regular;
          }
          b{
            font-weight: 400;
          }
        }
      }
      button {
        margin-top: 44px;
      }
    }
 
  }
}
</style>